<template>
    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#37bbbc" text-color="#fff"
        active-text-color="#ffd04b" router :default-active="this.$route.path">
        <!-- 导航菜单 -->
        <el-menu-item index="/index/recommend">云野租房</el-menu-item>
        <el-menu-item index="/index/resource">房&nbsp;&nbsp;源</el-menu-item>
        <el-menu-item index="/index/puthouse">发布房源</el-menu-item>
        <el-menu-item index="/index/help">帮助中心</el-menu-item>
        <!-- /导航菜单 -->
        <!-- 个人信息 -->
        <div class="fr">
            <el-submenu class="fr" index="">
                <template slot="title">

                    <el-avatar size="large" :src="user.userImage"></el-avatar>&nbsp;&nbsp;

                    <!-- 展示用户名 -->
                    <span name="userName">{{ user.userName }}</span>
                </template>
                <el-menu-item index="/accounts/profile">个人信息</el-menu-item>
                <el-menu-item index="/accounts/showOrder">全部订单</el-menu-item>
                <el-menu-item v-if="user.role==='admin'" index="/admin">进入管理</el-menu-item>
                <el-menu-item v-if="user.role==0" @click="logout">登录</el-menu-item>
                <el-menu-item v-if="user.role!=0" @click="logout">退出登录</el-menu-item>
            </el-submenu>
        </div>
        <!-- /个人信息 -->
    </el-menu>
</template>

<script>

export default {
    name: "IHeader",
    props: {
		user: {
			type: Object,
		},
	},
    data() {
        return {
          
            carouselImg: [
                { itemImg: require("../../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_6.jpg"), itemTitle: "" },
            ],
            recommendHouse: [
                { itemImg: require("../../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_6.jpg"), itemTitle: "" },
            ]
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
          
        },
        logout() {
			// 没有后台方法，由前端清除 token
			this.$VuexStore.commit("setToken", "");
			this.$router.push("/login");
		},
        
    },
    mounted: function () {
       
    },
};
</script>

<style scoped>
.el-header {
    background-color: #37bbbc;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    z-index: 15;
}

.el-header .fr {
    float: right;
}
</style>